<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
      li{
        line-height: 40px
      }
      span{
        color: red
      }
    </style>
</head>
<body>
  <h2>2D上下文</h2>
  <p>使用2D上下文提供的方法，就可以绘制简单的2D图形</p>
  <ul>
    <li>
      <h3>简介</h3>
      <ul>
        <li>2D上下文的两种基本绘图操作是填充和描边，填充，就是用指定的样式，（颜色渐变或图像）填充图形。描边就是在图形边缘划线</li>
        <li>
          <span>question</span>:但是明明用代码写上去了，为什么还是不好使，页面上看不到效果呢？
        </li>
      </ul>
    </li>
    <li>
      <h3>绘制矩形：矩形是唯一一种可以直接在2d上下文中绘制的形状</h3>
      <ul>
        <li>
          相关方法:fillRect(),strokeRect(), clearRect()。都接受4个参数,矩形x坐标，矩形y坐标，矩形宽度和矩形高度，这些参数的单位都是像素
        </li>
        <li>
          fillRect()在画布上绘制的矩形会填充指定的颜色。填充的颜色通过fileStyle属性指定
        </li>
        <li>
          strokeRect()方法在画布上绘制的矩形会使用指定的颜色描边，描边的颜色通过strokeStyle属性指定
          <i>
            <span>描边线条的宽度由lineWidth属性控制，该属性的值可以是任意数。另外lineCap：线条末端的形状； lineJoin: 线条相交的方式</span>
          </i>
        </li>
        <li>
          clearRect()用于清除画布上的矩形区域，本质上是变成透明
        </li>
      </ul>
    </li>
    <li></li>
  </ul>
  <canvas id="drawing" width="200" height="200">A drawing of something</canvas>
  <canvas id="drawing2" width="200" height="200">A drawing of something</canvas>
  <canvas id="drawing3" width="200" height="200">A drawing of something</canvas>
  <script src="./index.js"></script>
</body>
</html>